<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3加载动画</title>
	<link rel="stylesheet" href="./styles/load1.css" />
	<link rel="stylesheet" href="./styles/load2.css" />
	<link rel="stylesheet" href="./styles/load3.css" />
	<link rel="stylesheet" href="./styles/load4.css" />
	<link rel="stylesheet" href="./styles/load5.css" />
	<link rel="stylesheet" href="./styles/load6.css" />
	<style>
		body, div {
			padding: 0;
			margin: 0;
		}
		body {
			-webkit-display: flex;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			align-content: center;
			padding: 50px;
			background-color: #111;
		}
	</style>
</head>
<body>
	<div class="load load1"></div>

	<div class="load load2"></div>

	<div class="load load3">
		<div></div>
		<div></div>
		<div></div>
	</div>

	<div class="load load4">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>

	<div class="load load5">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>

	<div class="load load6">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>	
	</div>
</body>
</html>